<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="<s:url value="/css/style.css"/>" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript" src="<s:url value="/js/jquery.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/common.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/struts/utils.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/jquery.validate.js"/>"></script>
		<script type="text/javascript">
	function doSelectClassType() {
		$("#classTypeList option:selected").each( function() {
		    if ($(this).val()==-1){
		        return;
		    }
			$("#classTypename").val($(this).text());
			$("#classTypeId").val($(this).val());
		});
	}
	function doAddClassUnit() {
	   	var v = $("#upperLimit").val();
	  	var name = $("#classTypename").val();
		var reg = new RegExp("^[0-9]+(.[0-9]{2})?$", "g");
		if (!name||!reg.test(v)) {
			alert("please input upper limit");
			return;
		}
		$('#classUnitTable').append("<tr id='"+$("#classTypeId").val()+"'></tr>");
		$("#classUnitTable")
				.find("tr:last")
				.append(
						"<td class=\"tablecolour2\">"
								+ $("#classTypename").val()
								+ "</td><td title='limit' class=\"tablecolour2\">"
								+ $("#upperLimit").val()
								+ "</td><td class=\"tablecolour2\"  style=\"cursor:pointer\""
								+ "  onclick=\"doDeletClassType('"
								+ $("#classTypeId").val() + "','"+ $("#classTypename").val() +"');\">Del</td>");
		$("#classTypeList option:selected").remove();
		$("#classTypeId").val("");
		$("#classTypename").val("");
		$("#upperLimit").val("");
	}
	function doDeletClassType(clsId,clsName){
	   var toption="<option value='"+clsId+"'>"+clsName+"</option>";
	   $("#classTypeList").append(toption); 
	   $("#"+clsId).remove();
	}
	function doSubmit() {
		if(window.confirm('Save modify?')) {
		    var custr="";
	        $("#classUnitTable tr[id]").each( function() {
			    custr=custr+($(this).attr("id"))+","
			    +($(this).find("td[title='limit']").html())+";";
			});
			$("#classUnitString").val(custr);
	        $('#editForm').submit();
	     }
	}
	function goBack() {
		location.href = '<s:url value="/data/Course/list"/>';
	}
	$( function() {
		$('#editForm').validate();
		if ($.trim($('#result').text()) != '') {
			popupDiv('pop-div');
		}
	});
</script>
		<title><s:text name="system.title" />
		</title>
	</head>
	<body>
		<s:include value="/common/up.jsp"></s:include>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td class="box">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td id="tag-over">
								<span id="tag-over">Course</span>
							</td>
							<td class="tab3-line" width="90%">
								&nbsp;
							</td>
						</tr>
					</table>
					<s:form action="Course/save" namespace="/data" method="post"
						id="editForm" name="editForm">
						<s:hidden name="id"></s:hidden>
						<table width="100%" border="0" cellpadding="3" cellspacing="1"
							class="margin">
							<tr>
								<td align="right" width="50%" class="tablecolour5">
									Name<font color="red">*</font>:
								</td>
								<td width="50%" class="tablecolour5">
									<s:textfield name="name" cssClass="input2 required" size="24"/>
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Price<font color="red">*</font>:
								</td>
								<td class="tablecolour5">
									<s:textfield name="price" cssClass="input2 required number" size="24" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Term:
								</td>
								<td class="tablecolour5">
									<s:textfield  name="term"  cssClass="input2" size="24"/>
									Has Net Course
									<s:checkbox name="hasNetCourse" cssClass="input2" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Comment:
								</td>
								<td class="tablecolour5">
									<s:textfield name="comments" cssClass="input2" size="24" />
								</td>
							</tr>
							<tr>
								<td align="center" class="tablecolour5" colspan="2">
									<table width="100%" border="0">
										<tr>
											<td align="center" class="tablecolour5">
												<s:updownselect list="optionalClassTypeList"
													id="classTypeList" name="optionalClassType" headerKey="-1"
													headerValue="--- Please Select ---" listKey="id"
													listValue="name" emptyOption="false" 
													allowMoveDown="false" 
													allowMoveUp="false"
													cssStyle="WIDTH: 200px; HEIGHT: 200px"
													allowSelectAll="false"  
													onclick="doSelectClassType();" />
											</td>
											<td align="center" class="tablecolour5" valign="top">
												<table>
													<tr>
														<td>
															Select ClassType:
														</td>
														<td>
															<input type="text" id="classTypename" size="15" class="input2">
															<input type="hidden" id="classTypeId" >
														</td>
													 
														<td>
															Upper Limit:
														</td>
														<td>
															<input type="text" id="upperLimit" size="10" class="input2" >
														</td>
													 
														<td>
														    <input type="hidden" id="classUnitString" name="classUnitString">
														    <img onclick="javascript:doAddClassUnit();"
															src="<s:url value="/img/right/Add.gif"/>" border="0"
																align="absmiddle" />
														</td>
													</tr>
												</table>
											</td>
											<td class="tablecolour5" valign="top">
												<table id="classUnitTable" align="center" width="100%"
													border="0" cellpadding="0" cellspacing="1" class="box2">
													<tr>
														<td class="tablecolour1">
															ClassType
														</td>
														<td class="tablecolour1">
															Limit
														</td>
														<td class="tablecolour1">
															Function
														</td>
													</tr>
													<s:iterator value="selectClassUnitList" status="status">
														<tr id="<s:property value="classType.id" />">
														    <td class="tablecolour2">
																<s:property value="classType.name" />
															</td>
													        <td title="limit" class="tablecolour2">
																<s:property value="updateLimitTimes" />
															</td>
															 <td class="tablecolour2" style="cursor:pointer"  
															 onclick="doDeletClassType(<s:property value="classType.id" />,
															 '<s:property value="classType.name" />');">Del</td> 
														</tr>
													</s:iterator>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td align="center" colspan="2" height="50" class="tablecolour5">
									<input name="reset" type="reset" class="btn1" value="Reset" />
									<input type="button" class="btn1" value="Save"
										onclick="doSubmit()">
									<input name="goback" type="button" class="btn1" value="Go Back"
										onclick="goBack()" />
								</td>
							</tr>
						</table>
					</s:form>
				</td>
			</tr>
		</table>
		<s:include value="/common/down.jsp"></s:include>
		<div id='pop-div' style="width: 300px;" class="pop-box">
			<s:include value="/common/confirm.jsp"></s:include>
		</div>
	</body>
</html>